<template>
  <div class="message">
    <el-row class="message-title">
      <span>{{ title }}</span>
    </el-row>
    <el-row class="message-main">
      <el-row v-if="messageData.length === 0" class="message-main-ndata">
        暂无留言信息
      </el-row>
      <el-row v-else v-for="item in messageData" :key="item.id" class="message-item">
        <el-row class="message-item-title">
          <el-col :span="8">网友：{{ item.msgName }}</el-col>
          <el-col :span="8">邮箱：{{ item.msgEmail }}</el-col>
          <el-col :span="7">电话：{{ item.msgTel }}</el-col>
          <el-col :span="1">
            <el-button type="primary" size="mini" plain @click="deleteMessage(item.id)"><i class="el-icon-delete"></i></el-button>
          </el-col>
        </el-row>
        <div class="message-item-content">
          <pre>{{ item.msgContent }}</pre>
        </div>
      </el-row>
    </el-row>
    <el-row class="message-pagination" v-if="messageData.length > 0">
      <el-pagination
        @current-change="onCurrentChange"
        layout="prev, pager, next, jumper"
        :page-size="pageObj.pageSize"
        :total="pageObj.total">
      </el-pagination>
    </el-row>
    <!--<app-foot></app-foot>-->
  </div>
</template>

<script>
import api from '../api';
import AppFoot from '../components/app-foot';

export default {
  name: 'message-info',
  components: {AppFoot},
  data() {
    return {
      title: '留言信息',
      pageObj: {
        page: 1,
        pageSize: 8,
        total: 0
      },
      messageData: []
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      api.findAllMessage(this.pageObj).then((data) => {
        this.messageData = data.data;
        this.pageObj.total = data.total;
      });
    },
    onCurrentChange(page) {
      this.pageObj.page = page;
      this.initData();
    },
    deleteMessage(id) {
      api.deleteMessage({ id }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功'
        });
        this.pageObj.page = 1;
        this.initData();
      });
    }
  }
};
</script>

<style scoped lang="scss">
  .message {
    height: 100%;
    &-title {
      height: 40px;
      font-size: 24px;
      text-align: center;
      color: #e6a23c;
      margin-top: 20px;
      font-weight: bold;
      line-height: 40px;
    }
    &-main {
      /*border: 1px solid #8c939d;*/
      margin: 0 auto;
      margin-top: 15px;
      width: 96%;
      max-height: 75%;
      overflow: auto;
      &-ndata {
        text-align: center;
        font-size: 20px;
        color: #8c939d;
        margin-top: 10%;
      }
    }
    &-item {
      margin: 10px auto;
      width: 100%;
      color: #fff;
      &-title {
        padding-left: 10px;
        height: 40px;
        line-height: 40px;
        background-color: #e6a23c;
      }
      &-content {
        padding: 20px;
        color: black;
        border: 1px solid #e6a23c;
        /*background-color: #8c939d;*/
      }
    }
    &-pagination {
      margin-left: 20px;
      width: 100%;
    }
  }
</style>
